<script setup lang="ts">
export interface ConfirmBoxCardProps {
  title?: string
  bodyClass?: string
}

withDefaults(defineProps<ConfirmBoxCardProps>(), {
  title: '',
  bodyClass: '',
})
</script>

<template>
  <div class="confirm-box-card">
    <div
      v-if="title.trim()?.length"
      class="card-header"
    >
      {{ title }}
    </div>
    <div
      class="card-body"
      :class="bodyClass"
    >
      <slot />
    </div>
  </div>
</template>

<style lang="less" scoped>
.confirm-box-card {
  @apply text-sm/22px;
  display: flex;
  flex-direction: column;
  font-style: normal;
  & + .confirm-box-card {
    margin-top: 24px;
  }
  .card-header {
    @apply text-sm/22px font-700 mb-2 !text-[#1D2129];
    color: var(--cdn-cascader-color-text-1);
  }
  .card-body {
    color: var(--cdn-cascader-color-text-2);
    font-weight: 400;
    line-height: 16px;
  }
}
</style>
